<template>
  <div class="main-card">
    <div class="main-card-left">
      <div class="lunchdraw-header">
        <h2 class="text-primary">午饭抽签</h2>
        <p class="text-secondary">今天吃什么？让平台帮你决定！</p>
      </div>
      <div class="draw-area">
        <div class="draw-circle" :class="{ animating: animating }">
          <span v-if="result" class="draw-result-text">{{ result }}</span>
          <span v-else class="draw-placeholder">?</span>
        </div>
        <div v-if="pickedDish" class="dish-result">今日推荐菜品：<b>{{ pickedDish }}</b></div>
        <button class="primary-btn" @click="draw" :disabled="animating">{{ animating ? '抽签中...' : '点击抽签' }}</button>
      </div>
    </div>
    <div class="main-card-right">
      <div class="right-card">
        <h3>历史抽签</h3>
        <ul class="history-list">
          <li v-for="(item, idx) in history" :key="idx">{{ item }}</li>
          <li v-if="!history || history.length === 0">暂无历史</li>
        </ul>
        <div class="helper-section">
          <h4>功能说明</h4>
          <ul class="helper-list">
            <li>随机抽取午饭建议，轻松决定吃什么。</li>
            <li>历史记录仅本地保存。</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import '@/assets/styles/common.css'

const foods = ['食堂一楼', '食堂二楼', '外卖', '自带便当', '面馆', '快餐店']
const dishes = {
  '食堂一楼': ['红烧鸡腿饭', '番茄炒蛋盖饭', '鱼香肉丝饭', '宫保鸡丁饭'],
  '食堂二楼': ['麻辣香锅', '牛肉拉面', '酸菜鱼', '水煮肉片'],
  '外卖': ['黄焖鸡米饭', '奶茶套餐', '烤肉饭', '炸鸡汉堡'],
  '自带便当': ['番茄炒蛋', '青椒土豆丝', '红烧排骨', '素炒三丝'],
  '面馆': ['兰州拉面', '炸酱面', '刀削面', '牛肉面'],
  '快餐店': ['汉堡套餐', '炸鸡翅', '薯条', '可乐鸡翅']
}
const recommends = {
  '食堂一楼': '推荐：红烧鸡腿饭、番茄炒蛋盖饭',
  '食堂二楼': '推荐：麻辣香锅、牛肉拉面',
  '外卖': '推荐：黄焖鸡米饭、奶茶套餐',
  '自带便当': '推荐：健康营养搭配，记得多吃蔬菜哦！',
  '面馆': '推荐：兰州拉面、炸酱面',
  '快餐店': '推荐：汉堡套餐、炸鸡翅',
}

const result = ref('')
const history = ref([])
const animating = ref(false)
const pickedDish = ref('')

function draw() {
  if (animating.value) return
  animating.value = true
  setTimeout(() => {
    const pick = foods[Math.floor(Math.random() * foods.length)]
    result.value = pick
    history.value.push(pick)
    const dishArr = dishes[pick] || []
    pickedDish.value = dishArr.length ? dishArr[Math.floor(Math.random() * dishArr.length)] : ''
    animating.value = false
  }, 1200)
}

function getRecommend(food) {
  return recommends[food] || '多样选择，吃好喝好！'
}
</script>

<style scoped>
.main-card {
  display: flex;
  gap: 36px;
  max-width: 1100px;
  margin: 40px auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 4px 32px rgba(37, 99, 235, 0.10);
  padding: 40px 32px;
  align-items: stretch;
}
.main-card-left {
  min-width: 320px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  background: #f7faff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(37,99,235,0.06);
  padding: 24px 18px 18px 18px;
}
.main-card-right {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 320px;
}
.right-card {
  background: #f7faff;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(37,99,235,0.06);
  padding: 24px 18px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
}
.lunchdraw-header {
  text-align: center;
}
.lunchdraw-header h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 6px;
}
.draw-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.draw-circle {
  width: 110px;
  height: 110px;
  background: linear-gradient(135deg, #2563eb22 60%, #4f8cff22 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.1em;
  color: #2563eb;
  font-weight: bold;
  margin-bottom: 6px;
  box-shadow: 0 2px 12px rgba(37,99,235,0.08);
  transition: transform 0.3s;
}
.draw-circle.animating {
  animation: scaleSpin 1.1s cubic-bezier(.4,2,.6,1) both;
}
@keyframes scaleSpin {
  0% { transform: scale(1) rotate(0deg); }
  60% { transform: scale(1.18) rotate(360deg); }
  100% { transform: scale(1) rotate(720deg); }
}
.draw-result-text {
  color: #2563eb;
}
.draw-placeholder {
  color: #bbb;
}
.primary-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 28px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}
.primary-btn:hover {
  background: #1e40af;
}
.helper-section {
  margin-top: 24px;
  background: #f1f5ff;
  border-radius: 8px;
  padding: 12px 14px;
}
.helper-section h4 {
  color: #2563eb;
  font-size: 1em;
  margin-bottom: 6px;
}
.helper-list {
  padding-left: 18px;
  color: #555;
  font-size: 0.98em;
  margin: 0;
}
.dish-result {
  color: #1e40af;
  font-size: 1.1em;
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .main-card {
    flex-direction: column;
    padding: 24px 8px;
  }
  .main-card-left, .main-card-right {
    width: 100%;
    min-width: 0;
  }
}
</style>